<template>
  <view class="order-info-container">
    <!-- 头部店铺信息 -->
    <view class="shop-header">
      <view class="shop-info">
        <image
          class="shop-icon"
          :src="
            orderInfo.base_info?.supplier_logo ||
            'https://stock-account.oss-cn-shenzhen.aliyuncs.com/dev/upload/2025-05-07/681b26cbe0451.png'
          "
        ></image>
        <text class="shop-name">{{
          orderInfo.base_info?.supplier_name || ""
        }}</text>
      </view>
      <view
        class="order-status"
        :style="{ color: tabs[orderInfo.base_info?.order_status]?.color }"
        >{{ orderInfo.base_info?.order_status_desc }}</view
      >
    </view>

    <!-- 订单商品列表区域 -->
    <scroll-view class="order-content" scroll-y>
      <!-- 商品明细标题 -->
      <view class="section-title">采购明细</view>

      <!-- 商品列表 -->
      <view class="goods-list">
        <view
          class="goods-item"
          v-for="(goods, index) in orderInfo.order_detail"
          :key="index"
        >
          <view class="goods-name">{{ goods.product_name }}</view>
          <view class="goods-detail">
            <view class="goods-row">
              <text class="label">商品：</text>
              <text class="value">{{ goods.goods_name }}</text>
            </view>
            <view class="goods-row">
              <text class="label">品牌：</text>
              <text class="value">{{ goods.brand_name }}</text>
              <text class="label ml">备注：</text>
              <text class="value">{{ goods.remark }}</text>
            </view>
            <view class="goods-row">
              <text class="label">规格：</text>
              <text class="value">{{
                goods.goods_value_name.replace("??", "、")
              }}</text>
              <text class="label ml">数量：</text>
              <text class="value"
                >{{ goods.quantity
                }}<text v-if="goods.unit">/{{ goods.unit }}</text></text
              >
            </view>
            <view class="goods-row">
              <text class="label">单价：</text>
              <text class="value price">¥ {{ goods.price }}</text>
              <text class="label ml">合计：</text>
              <text class="value price">¥ {{ goods.total_price }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 订单信息区域 -->
      <view class="order-info">
        <view class="info-row">
          <text class="label">订单编号：</text>
          <text class="value">{{ orderInfo.base_info?.order_sn }}</text>
        </view>
        <view class="info-row">
          <text class="label">下单时间：</text>
          <text class="value">{{ orderInfo.base_info?.create_time }}</text>
        </view>
        <view
          class="info-row"
          v-if="!shop_id && [3, 4].includes(orderInfo.base_info?.order_status)"
        >
          <text class="label">发货时间：</text>
          <text class="value">{{ orderInfo.base_info?.delivery_time }}</text>
        </view>
        <view class="info-row" v-if="!shop_id">
          <text class="label">采购金额：</text>
          <text class="value">¥ {{ orderInfo.base_info?.pay_amount }}</text>
        </view>
        <view class="info-row" v-if="shop_id">
          <text class="label">业务员：</text>
          <text class="value">{{
            orderInfo.base_info?.sales_person_name
          }}</text>
        </view>
      </view>

      <!-- 配送信息 -->
      <view class="order-info">
        <view class="info-row">
          <text class="label">收货人：</text>
          <text class="value">{{
            orderInfo.distribution_info?.consignee
          }}</text>
        </view>
        <view class="info-row">
          <text class="label">手机号：</text>
          <text class="value">{{
            orderInfo.distribution_info?.consignee_mobile
          }}</text>
        </view>
        <view class="info-row">
          <text class="label">配送地址：</text>
          <text class="value">{{ orderInfo.distribution_info?.address }}</text>
        </view>
      </view>

      <!-- 配送信息 -->
      <view
        class="order-info"
        v-if="orderInfo.distribution_info?.delivery_method_desc"
      >
        <view class="info-row">
          <text class="label">发货方式：</text>
          <text class="value">{{
            orderInfo.distribution_info?.delivery_method_desc
          }}</text>
        </view>
        <view class="info-row">
          <text class="label">快递单号：</text>
          <text class="value">{{
            orderInfo.distribution_info?.logistics_no
          }}</text>
        </view>
        <view class="info-row">
          <text class="label">快递名称：</text>
          <text class="value">{{
            orderInfo.distribution_info?.logistics_compan
          }}</text>
        </view>
      </view>

      <!-- 底部总价占位，防止被底部按钮遮挡 -->
      <view class="bottom-placeholder"></view>
    </scroll-view>

    <!-- 底部固定按钮区域 -->
    <view class="bottom-actions">
      <view class="total-price">
        <view style="display: flex; align-items: center">
          <text class="nowrap">实付：</text>
          <text class="price nowrap"
            >¥ {{ orderInfo.base_info.pay_amount }}</text
          ></view
        >
        <view class="small">(不含运费)</view>
      </view>
      <view class="action-buttons">
        <button
          class="cancel-btn"
          @tap="cancel"
          v-if="orderInfo.base_info?.order_status < 4"
        >
          取消
        </button>
        <button
          class="confirm-btn"
          @tap="confirmOrderData"
          v-if="orderInfo.base_info?.order_status === 1"
        >
          确定采购单
        </button>
        <button
          class="confirm-btn"
          @tap="receive"
          v-if="orderInfo.base_info?.order_status === 3"
        >
          确定收货
        </button>
      </view>
    </view>
    <cancelReason ref="cancelReasonRef" @readyCancel="readyCancel" />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  cancelOrder,
  confirmOrder,
  getSupplierOrderDetail,
  getShareOrderDetail,
  confirmReceipt,
} from "@/apiShop/order";
import cancelReason from "@/component/cancelReason.vue";
import { tabsList } from "@/utils/const";
import { showToast } from "@/utils/helper";
import { getToken, getLoginType } from "@/utils/vmeitime-http/localStorage";
const tabs = ref(tabsList);
// 接收页面参数
const orderId = ref("");

// 模拟订单数据
const orderInfo = ref({
  base_info: {},
  order_detail: [],
});

const cancelReasonRef = ref(null);
// 取消订单
const cancel = (id) => {
  cancelReasonRef.value.show();
};

const readyCancel = async (str) => {
  await cancelOrder({ id: orderId.value, reason: str });
  await getorderInfo();
  showToast("取消成功");
};
const receive = (id) => {
  uni.showModal({
    title: "提示",
    content: "你确定已经收到货了吗？",
    success: async function (res) {
      if (res.confirm) {
        await confirmReceipt({ id: orderId.value });
        await getorderInfo();
        showToast("收货成功");
      }
    },
  });
};
// 确认订单
const confirmOrderData = () => {
  uni.showModal({
    title: "提示",
    content: "确定要确认此采购单吗？",
    success: (res) => {
      if (res.confirm) {
        confirmOrder({ id: orderId.value }).then(() => {
          // 添加确认逻辑
          showToast("采购单确认成功");
          setTimeout(() => {
            uni.navigateTo({ url: "/pagesShop/order/orderlist" });
          }, 800);
        });
      }
    },
  });
};

const getorderInfo = async () => {
  const res = await getSupplierOrderDetail({ id: orderId.value });
  console.log(res);
  orderInfo.value = res;
};

const getShareOrderInfo = async () => {
  const res = await getShareOrderDetail({
    id: orderId.value,
    shop_id: shop_id.value,
  });
  orderInfo.value = res;
};

const shop_id = ref(null);

onShow(() => {
  // 这里添加获取订单详情的API调用
  if (getLoginType() === "supplier" && getToken()) {
    uni.redirectTo({
      url: `/pages/order/supplierOrderInfo?id=${orderId.value}`,
    });
    return
  }
  is_shop.value ? getShareOrderInfo() : getorderInfo();
});
const is_shop = ref(false);
// 页面加载
onLoad((options) => {
  if (options.shop_id) {
    orderId.value = options.id;
    shop_id.value = options.shop_id;
    is_shop.value = true;
    return;
  }
  if (options.id) {
    orderId.value = options.id;
    is_shop.value = false;
  }
  if (options.scene) {
    const scene = decodeURIComponent(options.scene);
    const id = scene.split("=")[1]; // 直接获取等号后面的值
    orderId.value = Number(id);
  }
});
</script>

<style lang="scss" scoped>
.order-info-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid #eee;

  .shop-info {
    display: flex;
    align-items: center;

    .shop-icon {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .shop-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .order-status {
    font-size: 28rpx;
    color: #3399ff;
  }
}

.order-content {
  flex: 1;
  overflow: hidden;
  padding-bottom: 120rpx; // 为底部按钮留出空间

  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #1989fa;
    padding: 20rpx 20rpx 0 30rpx;
    background-color: #fff;
  }

  .goods-list {
    background-color: #fff;

    .goods-item {
      padding: 30rpx;
      border-bottom: 1px solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .goods-name {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
      }
      .goods-pru {
        font-size: 26rpx;
        color: #666;
      }
      .goods-detail {
        .goods-row {
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;

          .label {
            font-size: 26rpx;
            color: #666;
          }

          .value {
            font-size: 26rpx;
            color: #333;
          }

          .ml {
            margin-left: 40rpx;
          }

          .price {
            color: #ff0000;
          }
        }
      }
    }
  }

  .order-info {
    margin-top: 20rpx;
    background-color: #fff;
    padding: 30rpx;

    .info-row {
      display: flex;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        font-size: 26rpx;
        color: #666;
        width: 160rpx;
      }

      .value {
        font-size: 26rpx;
        color: #333;
        flex: 1;
      }
    }
  }

  .bottom-placeholder {
    height: 120rpx; // 与底部按钮高度一致
  }
}

.bottom-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  z-index: 100;

  .total-price {
    font-size: 28rpx;
    color: #333;

    .price {
      font-size: 34rpx;
      font-weight: bold;
      color: #ff0000;
    }

    .small {
      font-size: 24rpx;
      color: #999;
    }
  }

  .action-buttons {
    display: flex;
    gap: 20rpx;

    button {
      height: 70rpx;
      line-height: 70rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
      border-radius: 35rpx;

      &.cancel-btn {
        background-color: #fff;
        color: #666;
        border: 1px solid #ddd;
      }

      &.confirm-btn {
        background-color: #3399ff;
        color: #fff;
        border: none;
      }
    }
  }
}
.nowrap {
  white-space: nowrap;
}
</style>
